<style>
	page{
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		background-color: #f7f7f7;
	}
</style>
<style lang="scss" scoped>
	.charts-box {
	  width: 80%;
	  height: 460rpx;
		margin: 0 auto;
	}
	.header-wrap{
		width: 710rpx;
		height: 312rpx;
		margin: 20rpx auto;
		background: #FFFFFF;
		border-radius: 10rpx;
		overflow: hidden;
		.top{
			width: 90%;
			margin: 32rpx auto;
			font-size: 28Rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 52rpx;
			view{
				display: flex;
			}
		}
		.bottom{
			width: 89.6%;
			margin: .8rpx auto;
			display: flex;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #32529B;
			.first{
				width: 200rpx;
				height: 60rpx;
				border: 2rpx solid #32529B;
				border-radius: 10rpx;
				text-align: center;
				line-height: 60rpx;
			}
			.last{
				width: 200rpx;
				height: 60rpx;
				color: #FFFFFF;
				background: #32529B;
				border: 2rpx solid #32529B;
				border-radius: 10rpx;
				text-align: center;
				line-height: 60rpx;
				margin-left: 32rpx;
			}
		}
	}
	.flex{
		display: flex;
	}
	.items{
		align-items: center;
	}
	.justify{
		justify-content: space-between;
	}
	.middle-wrap{
		width: 710rpx;
		height: 53rpx;
		margin: 41rpx auto;
		.left{
			width: 142rpx;
			height: auto;
			text-align: right;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #333333;
		}
		.right{
			width: 210rpx;
			height: 53rpx;
			background: #FFFFFF;
			border-radius: 27rpx;
			justify-content: center;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
		}
	}
	.arrow {
		width: 12rpx;
		height: 12rpx;
		border: 1px solid #828282;
		border-left: none;
		border-bottom: none;
		transform: rotate(45deg);
	}
	.chart-wrap{
		width: 640rpx;
		height: 70rpx;
		margin: 60rpx auto;
		border-radius: 35rpx;
		display: flex;
		view{
			width: 160rpx;
			line-height: 100%;
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #32529B;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.one{
			border: 3rpx solid #32529B;
			border-radius: 38rpx 0 0 38rpx;
		}
		.two{
			border-top: 3rpx solid #32529B;
			border-bottom: 3rpx solid #32529B;
		}
		.three{
			border-top: 3rpx solid #32529B;
			border-left: 3rpx solid #32529B;
			border-bottom: 3rpx solid #32529B;
		}
		.four{
			border: 3rpx solid #32529B;
			border-radius:0 38rpx 38rpx 0;
		}
	}
		
	.chart1{
		background-color: #32529B;
		color: #FFFFFF;
	}
	.chart2{
		background-color: #FFFFFF;
		color: #32529B;
	}
	.chart{
		width: 710rpx;
		height: auto;
		margin: 0 auto;
		background-color: #FFFFFF;
		overflow: hidden;
	}
</style>
<template>
	<view>
		<view class="header-wrap">
			<view class="top">
				<view>
					<view>姓名:</view>
					<view>铁柱</view>
				</view>
				<view>
					<view>生日:</view>
					<view>2021-10-20</view>
				</view>
				<view>
					<view>设备:</view>
					<view>macDE:ACSSXC12:60:30</view>
				</view>
			</view>
			<view class="bottom">
				<view class="first">解除绑定</view>
				<view class="last">同步数据</view>
			</view>
		</view>
		
		<view class="middle-wrap flex justify items">
			<view class="left">用眼数据</view>
			<view class="right flex items" @click="listScreen()">2021-11-09 <view class="arrow"></view></view>
		</view>
		
		<view class="chart">
			<view class="chart-wrap">
				<view class="one" @click="tion(1)" :style="{'background':(aswitch == 1 ? '#32529B':'#ffffff'),'color':(aswitch != 1 ? '#32529B':'#ffffff')}">正确的坐姿</view>
				<view class="two" @click="tion(2)" :style="{'background':(aswitch == 2 ? '#32529B':'#ffffff'),'color':(aswitch != 2 ? '#32529B':'#ffffff')}">用眼时长</view>
				<view class="three" @click="tion(3)" :style="{'background':(aswitch == 3 ? '#32529B':'#ffffff'),'color':(aswitch != 3 ? '#32529B':'#ffffff')}">光照强弱</view>
				<view class="four" @click="tion(4)" :style="{'background':(aswitch == 4 ? '#32529B':'#ffffff'),'color':(aswitch != 4 ? '#32529B':'#ffffff')}">每天户外时间</view>
			</view>
			<view class="charts-box">
			  <qiun-data-charts 
			    type="column"
			    :opts="opts"
			    :chartData="chartData"
			  />
			</view>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
		list:['2021-11-09','2021-11-10','2021-11-11','2021-11-12'],
		// chart1:{
		// 	'--background-color': "#32529B",
		// 	'--color': "#FFFFFF",
		// },
		// chart2:{
		// 	'--background-color': "#FFFFFF",
		// 	'--color': "#32529B",
		// },
	  aswitch:1,
      chartData: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        color: ["#FAC858"],
        padding: [15,15,0,5],
        dataLabel: false,
        legend: {},
        xAxis: {
          disableGrid: true
        },
        yAxis: {
          data: [
            {
              min: 0
            }
          ]
        },
        extra: {
          column: {
            type: "group",
            width: 20,
            activeBgOpacity: 0.08,
            meterBorder: 0,
            meterFillColor: "#FAC858",
			activeBgColor:"#FAC858",
			barBorderCircle:true,
            barBorderRadius: [
              50,
              50,
              50,
              50
            ]
          }
        }
      }
    };
  },
  onReady() {
    this.getServerData();
  },
  methods: {
	  listScreen(id){
		console.log(1212);
	  	uni.showActionSheet({
	  		itemList:this.list
	  	})
	  },
	  tion(res){
		this.aswitch = res;
		console.log(this.aswitch);
	  },
    getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
            categories: ["2016","2017","2018","2019","2020","2021"],
            series: [
              {
                name: "不良使用时间",
                data: [10,20,50,40,20,16]
              }
            ]
          };
        this.chartData = JSON.parse(JSON.stringify(res));
      }, 500);
    },
  }
};
</script>

<style scoped>
  /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
  
</style>